<template>
<div class="question">
	<div class="question-box">
	<div class="question-head" style="margin-bottom: 40px;">
		<!--标题-->
		<div class="question-title">
			<p style="position: relative;top:30%;left:30px">{{question.title}}</p>
		</div>
		<!--用户信息-->
		<div class="userInfo">
			<div style="cursor:pointer" @click="ownerId=question.userId;userInfoVisible=true"><el-avatar :src="question.icon" :size="60" style="position: relative;top: 15px;left: 5%;border: 2px solid limegreen;float: left;"></el-avatar></div>
			<p style="position: relative;left: 7%;line-height:90px;display: inline;float: left;">{{question.username}}</p>
			<p	style="position: relative;left: 10%;line-height:100px;display: inline;float: left;font-size: 14px;color:grey;">{{question.created|timeFilter}}</p>
		</div>
		<!--内容-->
		<div class="content">
			<p style="width: 85%;position: relative;left: 8%;margin: 15px 0;text-indent:1cm;">{{question.content}}</p>
		</div>
		<div class="question-LikeAndAnswer">
			<!--点赞-->
			<div class="question-like" @click="handlerClickLike">
				<img v-if="question.isLike" :src="likeImage" style="position:relative;left:40%;top:10px;float:left;width: 30px;height: 30px;" />
				<img v-else :src="unlikeImage" style="position:relative;left:40%;top:10px;float:left;width: 30px;height: 30px;" />
				<span style="position:relative;left:43%;float:left;;font-size: 15px;">{{question.liked}}</span>
			</div>
			<!--评论-->
			<div class="question-answer" @click="answerFormVisible=true">
				<img  :src="answerImage" style="position:relative;left:40%;top:10px;float:left;width: 30px;height: 30px;"/>
				<span style="position:relative;left:43%;float:left">{{question.answerCount}}</span>
			</div>
		</div>
	</div>
	
	<div class="answer" v-for="(a,index) in answers" :style="setSolveAnswer(a)">
		<div class="userInfo">
			<!--用户头像-->
			<div style="cursor:pointer" @click="ownerId=a.userId;userInfoVisible=true">
				<el-avatar :src="a.icon" :size="60" style="position: relative;top: 15px;left: 5%;border: 2px solid limegreen;float: left;"></el-avatar></div>
			<!--显示用户名-->
			<p style="position: relative;left: 7%;line-height:90px;display: inline;float: left;">{{a.username}}</p>
			<!--显示回复时间-->
			<p	style="position: relative;left: 10%;line-height:100px;display: inline;float: left;font-size: 14px;color:grey;">{{a.created|timeFilter}}</p>
			<!--显示楼层数-->
			<p style="position: relative;left: 13%;top:40px;display: inline;float: left;font-size: 14px;color:grey;">{{index+2}}楼</p>
			
			<!--选为最佳答案-->
			<p v-if="question.solveId==null&&question.userId===me.id" 
				style="position: relative;right: 10%;top:30px;float: right;font-size: 14px;cursor: pointer;"
				class="solve"
				@click="handlerSetSolvedAnswer(a.id)"
				>选为最佳答案
			</p>
			<p style="position: relative;right: 3%;top:30px;float: right;font-size: 23px;cursor: pointer;color：blue" v-if="question.solveId==a.id">最佳答案</p>
		</div>
		<div class="content">
			<p style="width: 85%;position: relative;left: 8%;margin: 15px 0;text-indent:1cm;" >{{a.content}}</p>
		</div>
	</div>
	</div>
	<div class="recommend">推荐页</div>
	<!--用户信息-->
	<el-dialog :visible.sync="userInfoVisible" width="20%" title="个人界面" center>
		<UserInfo :ownerId="ownerId"></UserInfo>
	</el-dialog >
	<!--添加评论-->
	<el-dialog :visible.sync="answerFormVisible" width="30%" title="评论" center>
		<div style="height: 300px;">
		<el-input type="textarea" 
			v-model="answerForm.content"
			rows="8"	
			maxlength="5000" 
			show-word-limit
			style="font-size: 18px;">
		</el-input>
		<div slot="footer" style="margin: 20px 0;">
			<el-button style="margin-left: 30%;" @click="handlerAddAnswer()">评论</el-button>
			<el-button style="margin-left: 40px;" @click="answerFormVisible=false">取消</el-button>
		</div>
		</div>
	</el-dialog>
</div>
</template>

<script>
	import {mapState} from 'vuex'
	import UserInfo from '@/components/HomeModule/UserInfo'
	export default{
		name:'Question',
		data(){
			return {
				question:{},
				answers:{},
				ownerId:'',
				userInfoVisible:false,
				unlikeImage:require("@/assets/image/ask/unlike.png"),
				likeImage:require("@/assets/image/ask/like.png"),
				answerImage:require("@/assets/image/ask/answer.png"),
				answerFormVisible:false,
				answerForm:{
		
				},
				solveAnswerForm:{
					questionId:'',
					questionUserId:'',
					content:'',
				},
				solvedAnswerBackground:{
					/*background:"url("+require("@/assets/image/ask/solvedAnswer.png")+")",
					backgroundRepeat:'no-repeat',
            		backgroundSize: 'cover',*/
            		background:"rgba(159,231,146,0.2)",
				},
			}	
		},
		components:{
			UserInfo
		},
		computed:{
			...mapState(['me'])
		},
		methods:{
			handlerSetSolvedAnswer(val){
				if(this.question.solveId>0){
					this.$message.info("该问题已经有最佳答案")
					return;
				}
				this.solveAnswerForm.id=val
				this.solveAnswerForm.questionId=this.question.id
				this.solveAnswerForm.questionUserId=this.question.userId
				this.solveAnswerForm.questionTitle=this.question.title
				
				this.$confirm('确认将该楼选为最佳答案？','提示',{
					confirmButtonText:'确定',
					concelButtonText:'取消',
					type:'warning'
				}).then(
					()=>{
				
				this.$axios({
					method:'POST',
					url:'question/setSolve',
					headers:{
						authorization:localStorage.getItem("token")
					},
					data:this.solveAnswerForm
				}).then(
					response=>{
						if(response.data.success){
							this.getQuestion()
							this.$message.success('设置成功')
						}else{
							this.$message.error('设置失败')
						}
					}
				)
				}).catch(
					()=>{
						this.$message.info('已取消')
					}
				);
				
			},
			setSolveAnswer(answer){
				if(this.question.solveId<0){
					return;
				}
				if(this.question.solveId==answer.id){
					return this.solvedAnswerBackground
				}
			},
			handlerAddAnswer(){
				//校验
				if(this.question.solveId>0){
					this.$message.info("该问题已经有最佳答案")
					return;
				}
				//放入数据
				this.answerForm.questionId=this.question.id
				this.answerForm.questionUserId=this.question.userId
				this.answerForm.questionTitle=this.question.title
				this.$axios({
					method:'POST',
					url:'question/addAnswer',
					headers:{
						authorization:localStorage.getItem("token")
					},
					data:this.answerForm
				}).then(
					response=>{
						if(response.data.success){
							this.getQuestion()
							this.answerForm={}
							this.answerFormVisible=false
							this.$message.success("评论成功")
						}else{
							this.$message.error(response.data.message)
						}
					}
				)
			},
			handlerClickLike(){
				this.$axios({
					method:'POST',
					url:'question/clickLike',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:this.question.id
					}
				}).then(
					response=>{
						if(response.data.success){
							this.getQuestion()
							console.log("点赞成功")
						}else{
							this.$message.info(response.data.message)
						}
					}
				)
			},
			getQuestion(){
				this.$axios({
					method:'POST',
					url:'question/getById',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:this.$route.query.id
					}
				}).then(
					response=>{
						if(response.data.success){
							this.question=response.data.data
						}else{
							this.$message.error('帖子信息获取失败')
						}
					}
					
				)
			},
			getAnswers(){
				this.$axios({
					methods:'GET',
					url:'question/getAnswersByQuestionId',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:this.$route.query.id,
						current:1
					}
				}).then(
					response=>{
						if(response.data.success){
							this.answers=response.data.data
						}else{
							this.$message.error(response.data.message)
						}
					}
				)
			},
			init(){
				this.getQuestion()
				this.getAnswers()
			},
		},
		mounted(){
			this.init()
		},
		filters:{
			timeFilter(val){
				return val.replace(/T/," ")
			}
		},
	}
</script>

<style scoped>
	.question{
		background: #F1F1F1;	
		border: 1px solid #F1F1F1;
		width: 100%;
		min-height: 1000px;
		padding-bottom: 100px;
	}
	.question-box{
		display: inline-block;
		position: relative;
		left: 20%;
		width: 800px;
		top: 80px;
	}
	.question-head{
		min-height: 200px;
		width: 100%;
		position: relative;
		border: 1px solid rgba(0,0,0,0.2);
		background: white;
	}
	.question-title{
		height: 100px;
		position: relative;
		font-size: 24px;
		font-weight: 500;
		color:black;
		background: skyblue;
		color:white;
		margin-bottom: 10px;
	}
	.question-LikeAndAnswer{
		border-top: 1px solid rgba(0,0,0,0.3);
		height: 50px;
		position: relative;
	}
	.question-like{
		position: relative;
		width: 50%;
		height: 100%;
		line-height: 50px;
		display: inline-block;
		border-right:1px solid rgba(0,0,0,0.1);;
		cursor: pointer;
	}
	.question-answer{
		position: relative;
		width: 49%;
		height: 100%;
		display: inline-block;
		line-height: 50px;
		cursor: pointer;
	}
	.userInfo{
		height: 90px;
		font-size: 20px;
		color:cadetblue;
	}
	.content{
		min-height: 40px;
		font-size: 20px;
		font-weight: normal;
		line-height: 30px;
		padding-bottom: 40px;
	}
	.answer{
		min-height: 160px;
		width: 800px;
		position: relative;
		background: white;
		border: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 20px;

	}
	.solve{
		color:darkgray;
	}
	.solve:hover{
		color:black;
		border-bottom: 2px solid black;
	}
	/*推荐页*/
	.recommend{
		display: inline-block;
		min-height: 600px;
		width: 250px;
		border: 1px solid gray;
		position: relative;
		top: 80px;
		right: 12%;
		background: white;
		float:right;
	}
</style>